<template>
  <div class="cart">
    <van-nav-bar
      title="我的购物车"
      left-text="返回"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="main">
      <van-swipe-cell v-for="v in carts" :key="v.id">
        <van-card
          :num="v.amount"
          :price="v.price"
          :desc="v.product.desc"
          :title="v.product.name"
          class="goods-card"
          :thumb="v.product.coverImage | dalImg"
        >
          <template #tag>
            <van-checkbox
              v-model="v.checked"
              style="background-color: #ff149312"
            ></van-checkbox
          ></template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
        <div class="dian">
          <van-button type="info" size="mini" @click="bian(-1)" color="orange"
            >-</van-button
          ><span>{{ v.amount }}</span
          ><van-button size="mini" type="info" @click="bian(1)" color="orange"
            >+</van-button
          >
        </div>
      </van-swipe-cell>
    </div>
    <div class="end">
      <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { loadCartsAPI } from "../services/cart";
import { isLogined } from "../utils/auth";
export default {
  data() {
    return {
      carts: [],
      checked: false,
    };
  },
  created() {
    this.loadCart();
  },
  methods: {
    onClickEditAddress() {},
    onSubmit() {},
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "Home",
      });
    },

    //获取购物车数据
    async loadCart() {
      if (isLogined()) {
        const res = await loadCartsAPI();
        console.log(res.data);
        this.carts = res.data;
      } else {
        this.$router.push({
          name: "Login",
        });
      }
    },
    bian() {},
  },
  computed: {
    // chkAll: {
    //   set(v) {
    //     this.carts.forEach((v) => (v.checked = v));
    //   },
    //   get() {
    //     return this.carts.every((v) => v.checked);
    //   },
    // },
  },
};
</script>

<style scoped>
.cart {
  display: flex;
  flex-direction: column;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.main {
  /* overflow: auto; */
  position: relative;
  flex: 1;
}
.end {
  height: 80px;
}
.dian {
  width: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 10px;
  right: 50px;
}
span {
  /* display: block; */
  /* width: 20px; */
  text-align: center;
  margin: 0 3px;
}
</style>
